import React from 'react';
import styled from 'styled-components';

const Label = styled.label`
    display:flex;
    align-items: center;
    > span { margin-right: 16px; white-space: nowrap; }
    > input {
      display:block;
      width: 100%;
      height: 44px;
      background: none;
      border: none;
    }
`;

//类型是label加上input类型
type Props = {
    label: string;
} & React.InputHTMLAttributes<HTMLInputElement>;

const Input: React.FC<Props> = (props) => {
    const { label, children, ...rest } = props; //...rest是其他input的其他属性
    return (
        <Label>
            <span>{label}</span>
            <input {...rest} />
        </Label>
    )
}

export { Input }